<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>迷你酥 - 用户首页</title>
	<%@ include file="../site/jspf/head-tag.jspf" %>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/static/talent/css/homepage.css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/static/talent/css/profile.css">
</head>
<body>
	<div id="maskOverlay" style="display: none; opacity: 0.7; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100; background-color: rgb(0, 0, 0);"></div>
    <%@ include file="../site/jspf/user-header.jspf" %>

    <section class="top-search" id="topSearchOriginal">
		<div class="top-search-form clearfix">
			<form method="get" action="/companyl/search/">
				<fieldset>
					<input type="text" name="q" id="MSSFloor" placeholder="搜一搜" maxlength="30" value="">
					<input type="submit" value="搜索">
				</fieldset>
			</form>
			<p>热搜词：
				<a href="/companyl/search/?q=华为">华为</a>
				<a href="/companyl/search/?q=百度">百度</a>
				<a href="/companyl/search/?q=中国移动">中国移动</a>
				<a href="/companyl/search/?q=富士康">富士康</a>
				<a href="/companyl/search/?q=联想">联想</a>
			</p>
		</div>
	</section>
	<div class="container profiles pool clearfix">
		<div class="helpless_label"></div>
		<aside class="profiles_vcard">
			<div class="p_v_icon">
				<img src="http://img.kanzhun.com/images/avatar/9df944f6dc1bfe28ffde148cde348b2a.jpg" id="profilePortrait">
				<i class="male"></i>
				<a href="#" id="profilePortraitBtn">更换头像</a>
			</div>
			<h2 title="${talentPo.code}">${talentPo.code}</h2>
			<ul class="p_v_info mb10">
				<li></li>
			</ul>
			<p class="p_v_integral">
				<a href="/integralhelp.html" target="_blank" class="links fright f_12">如何赚积分？</a>
				积分：<em id="j-integral-number">45</em>
				<span class="f_14"> 分</span>
			</p>
			<p class="p_v_sign">
				<span class="bt_sign already">今日已签到</span>
				<a href="/exchange.html" class="integral_exchange">积分兑换</a>
			</p>
			<nav class="p_v_nav">
				<p><a href="<%=request.getContextPath()%>/TalentServlet?act=toUserPage">我的主页</a></p>
				<p><a href="<%=request.getContextPath()%>/TalentServlet?act=showAllResumes">我的简历</a></p>
				<p><a href="/usercenter/jobsearcher/">职位订阅</a></p>
				<p><a href="/resume/deliver/">投递的职位</a></p>
				<p><a href="/usercenter/jobcollection/">收藏的职位</a></p>
				<p><a href="/usercenter/followcompany/">关注的公司</a></p>
				<p><a href="/usercenter/content/">发布的内容</a></p>
				<p><a href="/usercenter/message/" class="mynews">我的消息</a></p>
				<dl class="mysets">
					<dt>我的设置<i class="trangle upTranslate"></i></dt>
					<dd>
					<p  class="current"><a href="<%=request.getContextPath()%>/TalentServlet?act=toAccountSetPage">-&nbsp;&nbsp;账号设置</a></p>
					<p><a href="<%=request.getContextPath()%>/TalentServlet?act=toPersonInfoPage">-&nbsp;&nbsp;个人信息</a></p>
					</dd>
				</dl>
			</nav>
		</aside>
		<section class="profiles_con">
			<h3 class="p_tt">帐号设置</h3>
			<p class="line_d"></p>
			<table id="actsettings" class="p_table_v" cellspacing="0" cellpadding="0" width="520">
				<tr id="head">
					<th>头像</th>
					<td colspan="2">
						<dl class="portrait_edit">
							<dt>
								<img src="http://img.kanzhun.com/images/avatar/9df944f6dc1bfe28ffde148cde348b2a.jpg" id="profilePortraitAlias" />
								<span id="change"></span>
								<a id="changebg">更换头像</a>
							</dt>
							<dd>
								<span id="nicknameWrapper" class="field modify">
									<input id="nickname" type="text" maxlength="20" value="${talentPo.nickname}" readonly autocomplete="off"/>
								</span>
								<a href="javascript:;" id="updateNickname" class="ml15" onclick="changeNicknameUI(this)">修改昵称</a>
								<a href="javascript:;" id="saveNickname" class="ml15" onclick="changeNickname(this)" style="display:none">保存</a>
								<a href="javascript:;" id="cancel" class="ml10" onclick="changeCancel(this)" style="display:none">取消</a>
								<script>
									var nickname = document.getElementById("nickname");
									var nicknameWrapper = document.getElementById("nicknameWrapper");
									var cancel = document.getElementById("cancel");
									var updateNickname = document.getElementById("updateNickname");
									var saveNickname = document.getElementById("saveNickname");
									function changeNicknameUI(obj) {
										nickname.removeAttribute("readonly");
										obj.style.display = "none";
										nicknameWrapper.className = "field";
										saveNickname.style.display = "";
										cancel.style.display = "";
									}
									
									function createForm(method,action) {
										var form = document.createElement('form');
										form.method = 'post';//也可以这样写
										form.action = action;
										//form.targer = '_blank';
										return form;
									}
									
									function createHidden(name,value,form) {
										var hidden = document.createElement('input');
										hidden.type = 'hidden';
										hidden.name = name;
										hidden.value = value;
										if(form) {
											form.appendChild(hidden);
										}
										return hidden;
									}
									
									function changeNickname(obj) {
										var action = "<%=request.getContextPath()%>/TalentServlet?act=modifyNickname";// 这里要去后台调用的action
										var form = createForm("post",action);
								       	createHidden("nickname",nickname.value,form);
								       	//createHidden("你要创建的隐藏域的名称",你要创建的隐藏域的值,form);
								       	document.body.appendChild(form);
								       	form.submit();
									}
									function changeCancel(obj) {
										nickname.readonly = true;
										updateNickname.style.display = "";
										nicknameWrapper.className = "field modify";
										saveNickname.style.display = "none";
										obj.style.display = "none";
										nickname.style.border = "0px"; 
										nickname.style.background = "transparent";
										flag = false;
									}
								</script>
							</dd>
							<dd class="info">
								<a href="<%=request.getContextPath()%>/TalentServlet?act=toPersonInfoPage" class="ml10">完善个人资料</a>
							</dd>
						</dl>
					</td>
				</tr>
				<tr>
					<th>邮箱</th>
					<td width="360">${talentPo.email}
						<span>已认证</span>
					</td>
					<td>
						<a onclick="emailChange(this)" class="bind_email js-modify-email" href="#">修改</a>
					</td>
				</tr>
				<tr>
					<th>手机</th>
					<c:if test="${empty talentPo.phone}">
						<td width="360">您还没有绑定手机
							<span>未认证</span>
						</td>
						<td>
							<a onclick="phoneChange(this)" class="bind_phone" href="#">立即绑定</a>
						</td>
					</c:if>
					<c:if test="${!empty talentPo.phone}">
						<td width="360">${talentPo.phone}
							<span>已认证</span>
						</td>
						<td>
							<a onclick="phoneChange(this)" class="bind_phone" href="#">更换手机</a>
						</td>
					</c:if>
				</tr>
				<tr>
					<th>修改密码</th>
					<td>●●●●●●</td>
					<td>
						<a onclick="passwordChange(this)" id="password_modify_btn" href="#">修改</a>
					</td>
				</tr>
			</table>
		</section>
	</div>
	<section id="password_modify_dialog" class="p_dialog" style="position: absolute; margin-left: -218px; top: 210px; left: 50%; z-index: 101; display: none;">
		<div class="dialog_con">
			<a href="#" class="dialog_close maskuiclose"></a>
			<h3>修改密码</h3>
			<form onsubmit="return validateForm();" action="<%=request.getContextPath()%>/TalentServlet?act=modifyPassword" method="post">
				<ul class="profile_form">
					<li>
						<span class="field">
							<input id="oldPassword" name="oldPassword" onblur="checkOldPassword()" type="password" placeholder="请输入原来的密码" class="v">
						</span>
						<i></i>
						<p id="oldPasswordInfo" class="err">密码不能为空！</p>
					</li>
					<li>
						<span class="field">
							<input id="password" onblur="checkPassword()" type="password" name="password" placeholder="新的密码" class="v" />
						</span><i></i>
						<p id="passwordInfo" class="err">密码不能为空！</p>
					</li>
					<li>
						<span class="field">
							<input id="confirmPassword" onblur="checkConfirmPassword()" type="password" placeholder="请确认密码" class="v" />
						</span><i></i>
						<p id="confirmPasswordInfo" class="err">密码不能为空！</p>
						<p id="compareInfo" class="err">再次输入不一致！</p>
					</li>
					<li>
						<input type="submit" value="确定" class="btn_grey_s">
						<a href="#" class="a_grey ml15 maskuiclose">取消</a>
					</li>
				</ul>
			</form>
			<script>
              	var oldPassword = document.getElementById("oldPassword");
              	function checkOldPassword() {
              		if(!oldPassword.value) {
              			document.getElementById("oldPasswordInfo").style.display = "block";
              			return false;
              		}
              		return true;
              	}
              	var password = document.getElementById("password");
              	function checkPassword() {
              		if(!password.value) {
              			document.getElementById("passwordInfo").style.display = "block";
              			return false;
              		}
              		return true;
              	}
              	var confirmPassword = document.getElementById("confirmPassword");
              	function checkConfirmPassword() {
              		if(!confirmPassword.value) {
              			document.getElementById("confirmPasswordInfo").style.display = "block";
              			return false;
              		}
              		return true;
              	}
              	function validateForm() {
              		if(confirmPassword.value != password.value) {
          				document.getElementById("compareInfo").style.display = "block";
          				return false;
              		}
              		return checkOldPassword() && checkPassword() && checkConfirmPassword();
              	}
              </script>
		</div>
	</section>
	<script>
		function passwordChange(obj) {
			var password_modify_dialog = document.getElementById("password_modify_dialog");
			var maskOverlay = document.getElementById("maskOverlay");
			password_modify_dialog.style.display = "block";
			maskOverlay.style.display = "block";
		}
	</script>
	
	<section id="phone_modify_dialog" class="p_dialog" style="position: absolute; margin-left: -218px; top: 210px; left: 50%; z-index: 101; display: none;">
		<div class="dialog_con">
			<a href="#" class="dialog_close maskuiclose"></a>
			<h3>绑定手机</h3>
			<form action="<%=request.getContextPath()%>/TalentServlet?act=modifyPhone" method="post" autocomplete="off">
				<ul class="profile_form">
					<li>
						<span class="field">
							<input value="${talentPo.phone}" type="text" name="phone" maxlength="11" placeholder="手机号" class="v"/>
						</span>
						<i></i>
						<input type="hidden" name="phoneAccountCheck" value="">
						<p class="err" data-msg="手机号不能为空！"></p>
					</li>
					<li class="authcode">
						<span class="field" style="width: 186px;">
							<input type="text" name="code1" placeholder="验证码" class="v">
						</span>
						<i></i>
							<img src="<%=request.getContextPath()%>/verify-code.jsp" title="看不清？" onclick="this.src='<%=request.getContextPath()%>/verify-code.jsp?r='+new Date();">
						<p class="err" data-msg="验证码不能为空！"></p>
					</li>
					<li>
						<span class="field">
						<input type="text" name="code" placeholder="短信校验码" class="v">
						</span><i></i>
						<p class="err" data-msg="短信校验码不能为空！"></p>
					</li>
					<li><input id="phone_code_btn" type="button" value="获取短信校验码" class="btn_grey_s" style="display:none;"></li>
					<li><input type="submit" value="确定" class="btn_grey_s"> <a href="#" class="a_grey ml15 maskuiclose">取消</a></li>
				</ul>
			</form>
		</div>
	</section>

	<script>
		function phoneChange(obj) {
			var phone_modify_dialog = document.getElementById("phone_modify_dialog");
			var maskOverlay = document.getElementById("maskOverlay");
			phone_modify_dialog.style.display = "block";
			maskOverlay.style.display = "block";
		}
	</script>
	
	
	<section id="email_modify_dialog" class="p_dialog" style="position: absolute; margin-left: -218px; top: 210px; left: 50%; z-index: 101; display: none;">
		<div class="dialog_con">
			<a href="#" class="dialog_close maskuiclose"></a>
			<h3>修改邮箱</h3>
			<form action="<%=request.getContextPath()%>/TalentServlet?act=modifyEmail" method="post">
				<input type="hidden" name="token" value="kPLfBNSx4P5qxDb">
				<ul class="profile_form">
					<li>
						<span class="field"><input type="text" placeholder="邮箱" value="${talentPo.email}" readonly></span><i></i>
					</li>
					<li>
						<span class="field"><input type="text" name="email" placeholder="新邮箱" class="v"></span><i></i>
						<input type="hidden" name="mailAccountCheck" value="">
						<p class="err" data-msg="邮箱不能为空！"></p>
					</li>
					<li>
						<input type="submit" value="确定" class="btn_grey_s">
							<a href="#" class="a_grey ml15 maskuiclose">取消</a>
					</li>
				</ul>
			</form>
		</div>
	</section>
	<script>
		function emailChange(obj) {
			var email_modify_dialog = document.getElementById("email_modify_dialog");
			var maskOverlay = document.getElementById("maskOverlay");
			email_modify_dialog.style.display = "block";
			maskOverlay.style.display = "block";
		}
		var maskuiclose = document.getElementsByClassName("maskuiclose");
		for(var i = 0; i < maskuiclose.length; i++) {
			maskuiclose[i].onclick = function() {
				document.getElementById("email_modify_dialog").style.display = "none";
				document.getElementById("phone_modify_dialog").style.display = "none";
				document.getElementById("password_modify_dialog").style.display = "none";
				document.getElementById("maskOverlay").style.display = "none";
			}
		}
	</script>
	</section>
</body>
</html>